<script setup lang='ts'>
import type { FormItemRule } from 'element-plus'

import { useAddorUpdateGroup } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const { isPending, mutate } = useAddorUpdateGroup()

const id = defineModel<any>('id')

const editparams = defineModel<any>('editparams')

const visible = defineModel<boolean>('visible', { required: true })

const dialogTitle = computed(() => unref(id) ? '编辑' : '新增')

const formRef = ref()

const initialState = {
    groupName: '',
    status: true,
}

const state = ref<any>(
    cloneDeep(initialState),
)

const columns = computed<any[]>(() => {
    return [
        {
            colProps: {
                span: 24,
            },
            fieldProps: {
                maxlength: 50,
            },
            label: '集团名称',
            prop: 'groupName',
        },
        {
            colProps: {
                span: 12,
            },
            label: '状态',
            prop: 'status',
            valueType: 'switch',
        },
    ]
})

function validateCategoryName(_rule: FormItemRule, value: string, callback: Fn): void {
    const pattern = /\s/
    if (!value) {
        callback(new Error('请输入集团名称'))
    }
    if (pattern.test(value))
        callback(new Error('集团名称不允许输入空格'))

    else
        callback()
}

const rules = {
    groupName: [
        {
            required: true,
            trigger: ['blur', 'change'],
            validator: validateCategoryName,
        },
    ],

}
function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    editparams.value = null
    formRef.value.formInstance.resetFields()
}

async function confirm() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            groupName: unref(state).groupName,
            id: unref(id),
            status: unref(state).status ? 1 : 0,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

watchEffect(() => {
    if (id.value && editparams.value) {
        const params = {
            ...editparams.value,
            status: editparams.value.status === 1,
        }
        state.value = cloneDeep(params)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialogTitle"
                width="800"
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  :rules="rules"
                  class="max-h-600 overflow-x-hidden overflow-y-auto"
                  :row-props="{ gutter: 20 }"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
